<template>
	<view class="">
		<!-- <Empty v-if="list.length===0"></Empty> -->

		<view>
			<view class="datebox" @click="show = true" v-show="isdate == false">
				选择日期
			</view>
			<view class="datebox" style="width: 385rpx;" @click="show = true" v-show="isdate == true">
				{{date.startDate}}到{{date.endDate}}
			</view>
			<u-calendar v-model="show" :mode="mode" @change="change">
				<view slot="tooltip">
					<view class="title" @click="quanbu">
						全部
					</view>
				</view>
			</u-calendar>
			<Empty v-if="list.totalCount ===0">
			</Empty>



			<view class="infoBox" v-else>
				<view class="box" v-for="(item,index) in list.list" :key="index">
					<view class="top">
						<view class="date">
							{{item.date}}
						</view>
						<view class="text">
							已结算：<text>+{{item.commission}}</text>
						</view>

					</view>
					<view class="bottom" v-for="(list,index) in item.list" :key="index">
						<view class="imgUrl">
							<image :src="list.avatar" mode=""></image>
						</view>
						<view class="rightBox">
							<view class="tops">
								<view class="username">
									{{list.nickname}}
								</view>
								<view class="numbers">
									消耗大王币数<text>{{list.price}}大王币</text>
								</view>
							</view>
							<view class="bottoms">
								<view class="IDs">
									ID：{{list.form_user_id}}
								</view>
								<view class="settlement">
									已结算 <text>{{list.commission}}</text>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import Empty from '@/components/empty/empty.vue'
	export default {
		components: {
			Empty
		},
		data() {
			return {
				list: [],
				show: false,
				mode: 'range',
				isdate: false,
				date: {},
			}
		},
		onLoad(option) {
			this.getlist()
		},
		methods: {
			quanbu() {
				this.show = false
				this.date = {},
					this.isdate = false
				this.getlist()
			},
			change(e) {
				this.date = e
				this.isdate = true
				this.getlist()
			},
			getlist() {
				if (this.isdate == false) {
					this.$Request.get(this.$api.user.commissionLogDetail).then(res => {
						this.list = res.data
						////console.log(this.list);
					});
				} else {
					let data = {
						s_date: this.date.startDate,
						e_date: this.date.endDate
					}
					this.$Request.get(this.$api.user.commissionLogDetail, data).then(res => {
						this.list = res.data
					});
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.yonghuimg {
		width: 92rpx;
		height: 92rpx;
		margin-top: 35rpx;
		margin-left: 25rpx;
		border-radius: 50%;
	}

	.yonghubox {
		width: 690rpx;
		height: 160rpx;
		background: #FFFFFF;
		box-shadow: 0px 10px 16px 0px rgba(131, 126, 127, 0.08);
		border-radius: 20px;
		margin: 0 auto;
		display: flex;
		margin-top: 35rpx;
	}

	.title {
		text-align: center;
		padding: 20rpx 0 0 0;
	}

	.datebox {
		width: 285rpx;
		height: 70rpx;
		background: #EBF0F9;
		border-radius: 35px;
		text-align: center;
		line-height: 70rpx;
		margin-top: 35rpx;
		margin-left: 25rpx;
	}


	.infoBox {
		.box {
			margin-top: 45rpx;

			.top {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.date {
					margin-left: 48rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #4B4B4B;
				}

				.text {
					margin-right: 58rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #5F6B63;

					text {
						color: #21C8C1;
						font-size: 36rpx;
					}
				}
			}

			.bottom {
				width: 690rpx;
				height: 160rpx;
				background: #fff;
				box-shadow: 0px 10px 16px 0px rgba(131, 126, 127, 0.08);
				border-radius: 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 35rpx 30rpx;

				.rightBox {
					text-align: left;
					flex: 1;
					font-family: PingFang SC;
					font-weight: 500;

					.tops {
						display: flex;
						justify-content: space-between;

						.username {
							font-size: 28rpx;
							color: #01101E;
							flex: 1;
						}

						.numbers {
							font-size: 24rpx;
							color: #797979;
							flex: 1;

							text {
								font-size: 28rpx;
								color: #21C8C1;
								margin-left: 13rpx;
							}
						}
					}

					.bottoms {
						margin-top: 36rpx;
						display: flex;
						justify-content: space-between;

						.IDs {
							font-size: 24rpx;
							color: #484C4E;
							flex: 1;
						}

						.settlement {
							font-size: 24rpx;
							color: #797979;
							flex: 1;

							text {
								font-size: 28rpx;
								color: #21C8C1;
								margin-left: 13rpx;
							}
						}
					}
				}

				.imgUrl {
					width: 92rpx;
					height: 92rpx;
					margin-left: 36rpx;
					margin-right: 23rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}
		}
	}
</style>
